<template>
  <div class="p-2">
    <div class="text-right mb-2">
      <el-button size="small" icon="el-icon-printer" :disabled="loading" @click="handlePrint">
        打印
      </el-button>
      <el-button
        icon="el-icon-download"
        :loading="downloadLoading"
        @click="handleExport(relatedData.customer_name)"
      >
        导出
      </el-button>
    </div>
    <div :id="printId">
      <table
        class="table table-bordered vertical-align-middle text-center table-sm"
        v-loading="loading"
      >
        <colgroup>
          <col width="17%" />
          <col width="33%" />
          <col width="17%" />
          <col width="33%" />
        </colgroup>
        <tbody>
          <tr v-for="(p, index) of tableData" :key="index">
            <td class="td-label">{{ p.label }}</td>
            <td :colspan="p.colspan || 1" :class="p.class || 'text-center'">
              {{ relatedData[p.prop] }}
            </td>
            <td class="td-label" v-if="p.label2">{{ p.label2 }}</td>
            <td v-if="p.label2">{{ relatedData[p.prop2] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { printA4, excelTableExport, domHasClass } from '@vimi/utils-tool'
import { projectIsCompany } from '@/bank/views/fast/index'

export default {
  props: {
    queryId: String,
  },
  data() {
    return {
      tableName: 'customer_related_quick',
      loading: false,
      relatedData: {},
      tableData: [],
      downloadLoading: false,
    }
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  computed: {
    printId() {
      return `${this.queryId}-project-detai`
    },
  },
  created() {},
  methods: {
    getData() {
      this.relatedData = {}
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, { 'customer_related_id.eq': this.queryId })
        .then(res => {
          const data = res?.data?.[0] ?? {}
          data.loadEndDate = this.$utils.dateFormat(data.load_end_date, 'yyyy-MM-dd')
          data.loadDate = this.$utils.dateFormat(data.load_date, 'yyyy-MM-dd')
          data.funds = +data.reply_funds || +data.approved_funds || +data.apply_funds || ''
          data.isOwnHouseCert = {
            0: '否',
            1: '是',
          }[data.is_own_house_cert]
          const isCompany = projectIsCompany(data)
          const baseInfo = isCompany
            ? [
                {
                  label: '企业名称',
                  prop: 'customer_name',
                  label2: '营业执照编号',
                  prop2: 'register_no',
                },
                {
                  label: '主营品种',
                  prop: 'business_category',
                  label2: '联系人电话',
                  prop2: 'mobile_no',
                },
                { label: '负责人姓名', prop: 'corp_name', label2: '地址', prop2: 'address' },
                {
                  label: '所属行业',
                  prop: 'parent_main_business',
                  label2: '十二大产业',
                  prop2: 'main_business',
                },
              ]
            : [
                {
                  label: '负责人姓名',
                  prop: 'customer_name',
                  label2: '身份证号',
                  prop2: 'lender_idcard',
                },
                {
                  label: '主营品种',
                  prop: 'business_category',
                  label2: '联系人电话',
                  prop2: 'mobile_no',
                },
                { label: '被担保人类型', prop: 'org_class_name', label2: '地址', prop2: 'address' },
              ]
          this.tableData = [
            ...baseInfo,
            {
              label: '授信金额（万元）',
              prop: 'funds',
              label2: '已支用余额（万元）',
              prop2: 'cur_use_funds',
            },
            { label: '放款日期', prop: 'loadDate', label2: '还款日期', prop2: 'loadEndDate' },
            { label: '贷款期限(月)', prop: 'months', label2: '贷款用途', prop2: 'funds_use_dir' },
            { label: '担保费（元）', prop: 'gua_fee', label2: '贷款利率(%)', prop2: 'load_rate' },
            {
              label: '银担协议名称',
              prop: 'bank_gua_name',
              label2: '银担协议编号',
              prop2: 'bank_gua_no',
            },
            {
              label: '银担协议签订时间',
              prop: 'bank_gua_time',
              label2: '是否有自有房产',
              prop2: 'isOwnHouseCert',
            },
          ]
          this.relatedData = { ...data }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handlePrint() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
       .vertical-align-middle td { vertical-align: middle; }
       .td-label { text-align: left; background-color: $gray-100; }
      `
      )
    },
    handleExport(name) {
      const borderAllThin = {
        left: { style: 'thin' },
        top: { style: 'thin' },
        right: { style: 'thin' },
        bottom: { style: 'thin' },
      }
      this.downloadLoading = true
      excelTableExport(this.printId, name, {
        styles: {
          border: borderAllThin,
          alignment: {
            vertical: 'center',
            horizontal: 'left',
            wrapText: true,
          },
        },
        cellStyles: {},
        cols: [{ wch: 20 }, { wch: 30 }, { wch: 20 }, { wch: 30 }],
        rows: {},
        cellHandler({ value, td }) {
          const style = {}
          if (domHasClass(td, 'text-center')) {
            style.alignment = { horizontal: 'center' }
          }
          return { value, style }
        },
      }).finally(() => {
        this.downloadLoading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
}
.td-label {
  text-align: left;
  background-color: $gray-100;
}
</style>
